<template>
  <div class="main">
    <!-- {{ res }} -->
    <ul>
      <li v-for="post in res" :key="post.id">
        <h3>
          <router-link to="">
            {{ post.title }}
          </router-link>
          <br>
          <small>{{ post.small }}</small>
          
        </h3>
        <p>
          作者：{{ post.author }} | 发表于：{{ post.time }}
          <span class="float-right">
            <router-link to="">
              查看原文
              <i class="el-icon-d-arrow-right"></i>
            </router-link>
          </span>
        </p>
        <img :src="post.pic" alt="">
        <el-divider></el-divider>
      </li>
    </ul>
    <div class="fenye">
      <el-pagination background layout="prev, pager, next" :total="1000">
      </el-pagination>
    </div>
  </div>
</template>

<script>
//模拟请求到的数组、
let resData = [
  {
    id: "1",
    title: "PHP学科：MySQL手册免费分享",
    small:"",
    src:"",
    author: "博学谷",
    time: "05-31 14:50:07",
    des: "文章描述",
    pic: "",
  },
  {
    id: "2",
    title: "前端必学框架Bootstrap，3天带你从入门到精通，免费分享！",
    small:"",
    src:"",
    author: "博学谷",
    time: "05-31 14:50:07",
    des: "文章描述",
    pic: "",
  },
  {
    id: "3",
    title: "想少走弯路，就看看这个贴：PHP职业发展规划与技能需求！",
    small:"",
    src:"",
    author: "博学谷",
    time: "05-31 14:50:07",
    des: "文章描述",
    pic: "",
  },
  {
    id: "4",
    title: "PHP进阶：想要提高PHP的编程效率，你必须知道的49个要点",
    small:"",
    src:"",
    author: "博学谷",
    time: "05-31 14:50:07",
    des: "文章描述",
    pic: "",
  },
  {
    id: "5",
    title: "最涨薪PHP项目-PHP微信公众平台开发",
    small:"在“智能手机”时代，没有人不识微信！",
    src: "",
    author: "博学谷",
    time: "05-31 14:50:07",
    des: "文章描述",
    pic: require("../../assets/b.png"),
  },
];
export default {
  data() {
    return {
      res: resData,
    };
  },
};
</script>

<style scoped>
.main {
  background: #fff;
  margin-right: 10px;
  margin-top: -2px;
}

.float-right {
  float: right;
}

li {
  list-style-type: none;
  padding-left: 10px;
}

a {
  color: #000;
  text-decoration: none;
}

ul {
  padding: 10px;
}

.el-pagination {
    white-space: nowrap;
    padding: 2px 5px;
    color: #303133;
    font-weight: 700;
    margin-left: 200px;
    padding-bottom: 20px;
}

small{
  font-size: 14px;
  font-weight: 400;
}
</style>